/* Reset */
body, div, section, article, header, nav, footer, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, span, img, form, fieldset, legend, input, button, textarea, blockquote, th, td, menu, figure, dir, sup {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

h1, h2, h3, h4, h5, h6, th {
    font-weight: normal
}

q:before, q:after {
    content: ''
}

address, cite, dfn, em, var {
    font-style: normal;
}

img {
    border: 0;
    display: block;
}

input, button, textarea, select {
    vertical-align: middle;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

textarea {
    overflow: auto
}

a {
    text-decoration: none
}

:focus {
    outline: 0
}

a, .hand {
    cursor: pointer
}

ul li {
    list-style-type: none;
}

input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
    padding: 0;
}

input:focus {
    outline: none;
}

input[type="button"],
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
button,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="checkbox"] {
    border: #c8c8c8 1px solid;
    border-radius: 0;
    background: #FFF;
}

input[type="radio"] {
    border: #c8c8c8 1px solid;
    background: #ccc;
}

/* Public */
html {
    height: 100%;
}

body {
    color: #333438;
    height: 100%;
    font-size: 12px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%; /* Fix for webkit minFont size */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Remove highlight on tap event*/
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-tap-highlight-color: rgba(0, 0, 0, 0);
    -o-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", \5FAE\8F6F\96C5\9ED1, tahoma, simsun, sans-serif;
    background: #f3f4f8;
    -webkit-text-size-adjust: none;
}

a {
    color: #333438;
}

/* Font */
.fsi {
    font-style: italic
}

/*斜体*/
.fwb {
    font-weight: bold
}

/*加粗*/
.fs1 {
    font-size: 14px !important;
}

.fs2 {
    font-size: 16px !important;
}

.fs3 {
    font-size: 18px !important;
}

.fs4 {
    font-size: 24px !important;
}

.fs5 {
    font-size: 30px !important;
}

.fs {
    font-size: 12px !important
}

/*默认大小*/
.ch {
    font-family: "宋体";
}

/*宋体*/
.en {
    font-family: Arial;
}

/*英文字体*/
.c1 {
    color: #ccc !important;
}

/*浅灰色*/
.c2 {
    color: #999 !important;
}

/*深灰色*/
.c3 {
    color: #666 !important;
}

/*灰色*/
.c5 {
    color: #ee175d !important;
}

.red {
    color: #d30830 !important;
}

/*红色*/
.white {
    color: #FFF;
}

/*白色*/
.black {
    color: #000 !important;
}

/*黑色*/
.green {
    color: #2ec225 !important;
}

/*绿色*/
.yellow {
    color: #fcff15;
}

/*黄色*/
.blue {
    color: #0a90e2;
}

/*蓝色*/
.tdu {
    text-decoration: underline
}

/*下划线文字*/
.tdl {
    text-decoration: line-through;
}

/*中划线文字*/
/* COMMON */
.fl {
    float: left
}

.fr {
    float: right
}

.pa {
    position: absolute
}

.pr {
    position: relative
}

.tal {
    text-align: left !important
}

.tar {
    text-align: right !important
}

.tac {
    text-align: center !important
}

.vam {
    vertical-align: middle;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
}

.clearfix:after {
    clear: both;
}

/* IE 6/7 */
.clearfix {
    *zoom: 1;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.icon {
    background-image: url(../images/icon.png);
    background-repeat: no-repeat;
    -webkit-background-size: 300px 300px;
    background-size: 300px 300px;
}

.ico16 {
    width: 16px !important;
    height: 16px !important;
    display: block;
}

.ico18 {
    width: 18px;
    height: 18px;
    display: block;
}

.ico20 {
    width: 20px;
    height: 20px;
    display: block;
}

.ico24 {
    width: 24px;
    height: 24px;
    display: block;
}

.box-sizing {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.btn {
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    background: #ee175d;
    text-align: center;
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    border: #e23552 1px solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.btn:hover {
    color: #fff;
    border-color: #cb003d;
    background: #cb003d;
}

.btn.fail {
    background: #ccc;
    border-color: #CCC;
}

.btn.cancel {
    height: 40px;
    line-height: 40px;
    border-color: #b5b5b5;
    background: #b5b5b5;
    font-size: 18px;
    display: block;
}

.btn.bgrey {
    border-color: #e8e8e8;
    background: #e8e8e8;
    color: #333;
}

.btn.Large {
    width: 100%;
    height: 40px;
    font-size: 18px;
    line-height: 38px;
}

.btn.bgreen {
    background: #2ec225;
    border-color: #2ec225;
}

.btn.bgf {
    border-color: #dfdfdf;
    background: #FFF;
    color: #666;
}

.btn.bwhite {
    border-color: #fff;
    background: none;
    color: #fff;
}

.btn.bred {
    border: #ee175d 1px solid;
    background: #FFF;
    color: #ee175d;
}

.btn.fail {
    border: #ccc 1px solid;
    background: #ccc;
    color: #fff;
}

.input-txt {
    width: 100%;
    height: 40px;
    line-height: 20px;
    border: #ddd 1px solid;
    padding: 10px;
    background: #FFF;
    font-size: 13px;
    color: #999;
    display: inline-block;
    vertical-align: middle;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.layer-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    position: fixed;
    z-index: 1000;
    left: 0px;
    top: 0px;
    visibility: hidden;
    opactiy: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.layer-bg.active {
    visibility: visible;
    opactiy: 1;
}

.layer {
    width: 90%;
    background: #FFF;
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 5%;
    top: 50%;
    z-index: 1003;
    -webkit-transform: translateY(-50%) scale(0.5, 0.5);
    transform: translateY(-50%) scale(0.5, 0.5);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.layer.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(-50%) scale(1.0, 1.0);
    transform: translateY(-50%) scale(1.0, 1.0);
}

.layer .title {
    height: 44px;
    line-height: 44px;
    position: relative;
}

.layer .title:before {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #dadade;
    content: '';
    font-size: 0;
}

.layer .title .name {
    display: block;
    float: left;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-left: 15px;
}

.layer .title .close-btn {
    width: 16px;
    height: 16px;
    float: right;
    padding: 12px 15px;
    display: block;
    cursor: pointer;
}

.layer .title .close-btn .icon-close {
    font-size: 16px;
    color: #c8c8c8;
    line-height: 1;
    display: block;
}

.layer .text-box {
    padding: 15px;
    font-size: 13px;
    line-height: 22px;
}

.layer-bot {
    overflow: hidden;
    background: #FFF;
    position: relative;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
}

.layer-bot:before {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 0;
    background: #dadade;
    content: '';
    font-size: 0;
}

.layer-bot .btns {
    width: 50%;
    font-size: 15px;
    color: #007aff;
    display: block;
    height: 44px;
    line-height: 44px;
    float: left;
    background: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.layer-bot .btns.br-line {
    border-right: #dadade 1px solid;
}

.b-grey {
    background: #eeeeef !important;
}

.blayer {
    background: #FFF;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0;
    z-index: 1003;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blayer.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.blayer .opn {
    margin: 20px 10px 10px;
}

.share-list li {
    width: 25%;
    text-align: center;
    float: left;
    margin-top: 20px;
}

.share-list.pb20 {
    padding-bottom: 20px;
}

.share-list li .imgbox {
    display: block;
    width: 50%;
    margin: 0 auto;
}

.share-list li p {
    line-height: 1;
    margin-top: 8px;
}

.upload-avatar .item {
    background: #fefefe;
}

.upload-avatar .bline {
    border-bottom: #d7d7d8 1px solid;
}

.upload-avatar .mt-6 {
    margin-top: 6px;
}

.upload-avatar .ua-btn {
    width: 100%;
    height: 48px;
    display: block;
    background: #FFF;
    text-align: center;
    font-size: 18px;
    color: #000;
    border: none;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.space {
    padding-left: 1em;
}

.spacep {
    padding-left: 0.5em;
}

.space2 {
    padding-left: 2em;
}

.imgbox {
    font-size: 0;
    line-height: 0;
    display: block;
}

.imgbox img {
    width: 100%;
}

.br-p {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}

.tap {
    display: block;
    position: relative;
}

.mt10 {
    margin-top: 10px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.m10 {
    margin: 10px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.plr10 {
    padding: 0 10px !important;
}

.ptb10 {
    padding: 10px 0 !important;
}

.p10 {
    padding: 10px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.b-g-n {
    background: none !important;
}

.b-b-n {
    border-bottom: none !important;
}

.ico-check {
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    border: #dfdfdf 1px solid;
    background: #FFF;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ico-check input {
    visibility: hidden;
    width: 0;
    height: 0;
}

.ico-check.active {
    background: #2ec225;
    border-color: #2ec225;
    position: relative;
}

.ico-check.active:after {
    content: "#";
    font-size: 0px;
    width: 4px;
    height: 8px;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 50%;
    margin-top: -6px;
    border-bottom: #fff 1px solid;
    border-right: #fff 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.on-off {
    width: 48px;
    height: 28px;
    position: relative;
    display: block;
    border: #e6e6e6 1.5px solid;
    background: #FFF;
    -webkit-border-radius: 15.5px;
    border-radius: 15.5px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.on-off.active {
    background: #0ba01e;
    border-color: #0ba01e;
}

.on-off .bun {
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background: #FFF;
    border: #e1e1e1 1px solid;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -webkit-box-shadow: 0px 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0px 3px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.on-off.active .bun {
    border-color: #fff;
    -webkit-transform: translate(20px, 0);
    transform: translate(20px, 0);
}

.shadow {
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.exit-opn {
    margin: 20px 20px 10px;
}

.icon-16 {
    width: 16px;
    height: 16px;
    display: block;
}

.icon-18 {
    width: 18px;
    height: 18px;
    display: block;
}

.icon-20 {
    width: 20px;
    height: 20px;
    display: block;
}

.icon-24 {
    width: 24px;
    height: 24px;
    display: block;
}

.search {
    background: #f3f4f8;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    bottom: 0;
    z-index: 991;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.search.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.search-box {
    height: 34px;
    background: #f8f8f8;
    position: relative;
    padding: 5px 48px 4px 10px;
    border-bottom: #bfbfbf 1px solid;
}

.search .cancel {
    width: 48px;
    height: 44px;
    line-height: 44px;
    display: block;
    text-align: center;
    font-size: 14px;
    color: #85878a;
    position: absolute;
    right: 0px;
    top: 0px;
}

.search-box .input-box {
    height: 32px;
    background: #FFF;
    padding-left: 36px;
    position: relative;
    border: #c0c0c0 1px solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.search-box .icon-search {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -8px;
    background-position: -40px -180px;
}

.search-box .txt {
    width: 100%;
    height: 32px;
    color: #c7c7cd;
    line-height: 32px;
    font-size: 14px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.s-hot {
    margin: 10px;
}

.s-hot-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    height: 30px;
}

.s-hot-list li {
    float: left;
    margin: 10px 10px 0 0;
}

.s-hot-list li a {
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    color: #686868;
    border: #dbd8d8 1px solid;
    background: #FFF;
    display: block;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}

@media all and (min-width: 360px) {
    .btn.Large {
        height: 44px;
        line-height: 42px;
    }
}

@media all and (min-width: 375px) {

}

@media all and (min-width: 414px) {
    .btn.Large {
        height: 46px;
        line-height: 44px;
    }

}






























